/* eslint-disable jsx-a11y/alt-text */
/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-09 16:21:29
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-09 17:43:18
 */
import React, { useRef, forwardRef } from 'react'
import imgSrc from '../../assets/gg.png'
import { useMouse } from './useHooks'

const Func = () => {
  return <div>御剑乘风来,除魔天地间!==Func</div>
}
const Child = forwardRef((props, ref) => {
  console.log(props, ref, 77)
  return <div ref={ref}>{props.txt}</div>
})

const Mouse = () => {
  const myChild = React.createRef()
  const inputRef = useRef(null)
  const box = useRef(null)
  // const [position, setPosition] = useState({
  //   x: 0,
  //   y: 0,
  // })
  // const fn = (e) => {
  //   setPosition(() => {
  //     return {
  //       x: e.clientX,
  //       y: e.clientY,
  //     }
  //   })
  // }
  // useEffect(() => {
  //   window.addEventListener('mousemove', fn)
  //   return () => {
  //     window.removeEventListener('mousemove', fn)
  //   }
  // }, [])
  // const position = useMouse()
  const handle = () => {
    console.log(inputRef.current.value, 777)
  }

  const handle2 = () => {
    console.log(box, 88)
  }
  return (
    <div>
      {/* 御剑乘风来,除魔天地间===Mouse! x：{position.x}====y:{position.y}
      <img
        src={imgSrc}
        style={{
          width: '80px',
          position: 'absolute',
          left: position.x - 40 + 'px',
          top: position.y - 40 + 'px',
        }}
      /> */}
      <input type="text" ref={inputRef} onChange={handle} />
      <h1 onClick={handle2}>h1</h1>
      {/* <Child ref={myChild} txt="parent props txt"></Child> */}
      <Func ref={box}></Func>
    </div>
  )
}
export default Mouse
